<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>网上商城</title>
    <link href="./css/common.css" rel="stylesheet" type="text/css">
    <link href="./css/product.css" rel="stylesheet" type="text/css">
</head>
<body>
<div th:replace="header.html"></div>

<div class="container productContent">
    <div class="span24 last">

        <div class="productImage">
            <a title="" style="outline-style: none; text-decoration: none;" id="zoom" href="http://image/r___________renleipic_01/bigPic1ea8f1c9-8b8e-4262-8ca9-690912434692.jpg" rel="gallery">
                <div class="zoomPad">
                    <img style="opacity: 1;" title="" class="medium" th:src="${'http://localhost:8089/'+p.image}">
                </div>
           </a>
        </div>
        <div class="name" th:text="${p.pname}">大冬瓜</div>
        <div class="sn">
            <div th:text="${'编号:'+p.pid}">编号：751</div>
        </div>
        <div class="info">
            <dl>
                <dt>商城价:</dt>
                <dd>
                    <strong th:text="${'￥：'+p.shopPrice+'元/份'}"></strong>
                    参 考 价：<del th:text="${'￥'+p.marketPrice+'元/份'}">￥6.00元/份</del>
                </dd>
            </dl>
        </div>
        <div class="action">
            <form id="cartForm">
                <input type="hidden" th:value="${p.pid}" name="pid">
            <dl class="quantity">
                <dt>购买数量:</dt>
                <dd>
                    <input id="quantity" name="quantity" value="1" maxlength="4" onpaste="return false;" type="text">
                    <div>
                        <span id="increase" class="increase">&nbsp;</span>
                        <span id="decrease" class="decrease">&nbsp;</span>
                    </div>
                </dd>
                <dd>
                    件
                </dd>
            </dl>
            <div class="buy">
                <input id="addCart" class="addCart" value="加入购物车" type="button">

            </div>
            </form>
        </div>
        <div id="bar" class="bar">
            <ul>
                <li id="introductionTab">
                    <a href="#introduction">商品介绍</a>
                </li>

            </ul>
        </div>

        <div id="introduction" name="introduction" class="introduction">
            <div class="title">
                <strong th:text="${p.pdesc}">商品介绍</strong>
            </div>
        </div>
    </div>
</div>

<div th:replace="footer.html"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $(document).ready(function(){
        $("#increase").click(function() {
                var quantity = parseInt($("#quantity").val())+1
                $("#quantity").val(quantity)
        })

        $("#decrease").click(function () {
            var quantity = parseInt($("#quantity").val())-1
            if(quantity<1){
                quantity=1
            }
            $("#quantity").val(quantity)
        })
    })
</script>

<script type="text/javascript">
    // jQuery语法： $("选择器").事件(function(){ // 具体的代码 })
    // 选择器 : #id   .类名
    // 事件：  click  blur  mouserover  mouserout 等
    // 文档就绪函数  整个界面都加载完成之后才会执行
    $(document).ready(function(){
        $("#addCart").click(function(){
            // 调用ajax添加购物车
            $.ajax(
                {
                    type: "post",// 提交方式  get/post
                    url : "addCart", // Controller中方法的路径
                    dataType: "json", // 从addCart.do方法返回的数据类型  text(文本)  json
                    data : $("#cartForm").serialize(), //序列化之后的数据:pid=1&quantity=5
                    success : function(data){
                        // 如果添加成功，界面提示添加成功!
                        if(data.CODE=="C100"){
                            alert("添加成功!");
                        }
                    },
                    error   : function(){
                        alert("网络错误！");
                    }
                }
            );
        });
    });
</script>
</body>
</html>